<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css入门</title>
    <!-- 
        css
           => 概念: 层叠样式表或级联样式表
           => 作用: 美化网页，实现网页外观
           => 语法:
                选择器{
                   样式名1：样式值1;  // 一条样式
                   样式名2：样式值2;
                     ...
                }
            学习css就是学习css选择器和css样式

            css选择器
              => 选中html标签元素的方式方法

              => 基础选择器
                    => 标签选择器
                    => ID选择器
                    => class类选择器

                 高级选择器
                    => 层次选择器
                       子代选择器
                          M>N 选中名为M的父元素下的所有子代元素N
                          
                       后代选择器
                         M N 
                        通用兄弟
                          M~N
                        相邻兄弟
                          M+N
                    => 伪类选择器
                         M:nth-child(1){
                         }

                    => 属性选择器
                        M[attr]
                        M[attr=value]

                  群组选择器
                     M,N{}
                     *{}

    -->
    <style>
        p{
            /* font-size: 28px; */
        }
        #content1{
            color:red;
        }
        .c1{
            font-size: 28px;
        }
        #content2 p{
            color: blue;
        }
        #content2 p:nth-child(1){
            background-color: pink;
        }

        input[type='text']{
            background-color: pink;
        }
    </style>
</head>
<body>
    <div id="content1" class="c1">内容</div>
    <p class="c1">元素一</p>
    <div>内容2</div>
    <div id="content2">
        <p>元素二</p>
        <p>元素三</p>
        <ul>
            <li>张三丰</li>
            <li>王小二</li>
            <p>张无忌</p>
        </ul>
    </div>
    <input type="text" name="username" placeholder="请输入名称">
    <input type="password" name="password" placeholder="请输入密码">
</body>
</html>